<template>
    <div class="pie" v-if="Visible">
        <echatrs :id="id" :option="option"></echatrs>
    </div>
</template>

<script>
    import echatrs from '@/components/echatrs'
    export default {
        name: "category",
        data(){
            return{
                option:{},
                Visible:false
            }
        },
        props:{
            id:String
        },
        components:{
            echatrs
        },
        methods:{
            format(option){
                this.option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: option.xAxis
                    },
                    axisLabel: {
                        color: '#fff',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '8%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: option.series.map(item=>{
                        return{
                            data: item.data,
                            type: 'line',
                            color:item.color,
                            ...item.solt
                        }
                    })
                };
                this.Visible = true
            }
        }
    }
</script>

<style scoped lang="less">
    .pie{
        width: 100%;
        height: 100%;
    }
</style>
